import { Icon } from '@/components/Icon';
import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import { baseURL } from '@/utils/request';
import { getToken } from '@/utils/storage';
import { Toast } from 'antd-mobile';
import { useEffect, useRef, useState } from 'react';
import { io, Socket } from 'socket.io-client';
import styles from './index.module.scss';

type Message = {
  // 用于区别消息类型的 type
  type?: 'robot' | 'user';
  msg: string;
  timestamp: number;
};
export default function ProfileChat() {
  // 创建ref保存客户端实例
  const sckRef = useRef<Socket | null>(null);

  const [msg, setMsg] = useState('');
  // 聊天列表
  const [list, setList] = useState<Message[]>([]);

  useEffect(() => {
    // 1 创建客户端实例
    sckRef.current = io(baseURL, {
      query: {
        token: getToken(),
      },
      transports: ['websocket'],
    });
    // 2 建立连接 并自动回复一条信息
    sckRef.current.on('connect', () => {
      setList([{ type: 'robot', msg: 'hello！有什么问题吗', timestamp: Date.now() }]);
    });

    // 4 接收信息 监听服务端发送的信息，显示在界面
    sckRef.current.on('message', (data) => {
      // 异步行为，会覆盖掉旧的数据，使用函数的写法更新
      setList((preList) => {
        return [...preList, { ...data, type: 'robot' }];
      });
    });
    return () => {
      // 关闭连接
      sckRef.current?.close();
    };
  }, []);

  // 这个不能和上面的useEffect 并在一起
  // 因为list，在上面不能作为依赖项 不然会不断建立io实例
  useEffect(() => {
    // scrollHeight表示超出视口的内容高度，可以理解为，能滚动多少就滚动多少
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth',
    });
  }, [list]);

  // 点击发送
  const handleSend = () => {
    // 非空判断
    if (!msg.trim()) {
      Toast.show({ content: '不能为空', duration: 1000 });
      return;
    }
    // 3 发送信息
    sckRef.current?.emit('message', { msg, timestamp: Date.now() });
    setList([...list, { type: 'user', msg, timestamp: Date.now() }]);
    setMsg('');
  };

  // 监听回车事件
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSend();
    }
  };
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar fixed>小智同学</NavBar>

      {/* 聊天记录列表 - 开始 */}
      <div className="chat-list">
        {list.map((item) => {
          return (
            <div key={item.timestamp}>
              {item.type === 'robot' && (
                <div className="chat-item robot">
                  <Icon type="iconbtn_xiaozhitongxue" />
                  <div className="message">{item.msg}</div>
                </div>
              )}
              {item.type === 'user' && (
                <div className="chat-item user">
                  <img src={'http://toutiao.itheima.net/images/user_head.jpg'} alt="" />
                  <div className="message">{item.msg}</div>
                </div>
              )}
            </div>
          );
        })}
      </div>
      {/* 聊天记录列表 - 结束 */}

      {/* 底部消息输入框 */}
      <div className="footer">
        <div className="input-footer">
          <Icon type="iconbianji" />
          <Input
            autoFocus
            className="no-border"
            placeholder="请描述您的问题"
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            onKeyDown={handleKeyDown}
          />
          <span className="send" onClick={handleSend}>
            发送
          </span>
        </div>
      </div>
    </div>
  );
}
